<template>
    <!-- 筛选搜索 -->
    <div class="search-box">
        <div class="search">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div class="right">
                <el-button @click="Reset">重置</el-button>
                <el-button type="primary" @click="ListFn">查询搜索</el-button>
            </div>
        </div>


        <div class="search">
            <span>账号/姓名:</span>
            <el-input placeholder="请输入账号、姓名" v-model="form.keyword"></el-input>
        </div>
    </div>
    <!-- 数据列表 -->
    <div class="search-box">
        <div class="search2">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button type="primary" @click="isShow = true" v-permission="'addUser'">添加</el-button>
            </div>
        </div>
    </div>
    <!-- 表格 -->
    <div>
        <el-table :data="list" border table-layout="auto" cell-class-name="align-c">
            <el-table-column prop="id" label="编号" width="60" />
            <el-table-column prop="username" label="账号" width="100" />
            <el-table-column prop="nickName" label="姓名" width="100" />
            <el-table-column prop="email" label="邮箱" width="150" />
            <el-table-column prop="createTime" label="添加时间" width="240">
                <template #default="{ row }">
                    <span>{{ dateFormat(row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="loginTime" label="最后登录" width="240">
                <template #default="{ row }">
                    <span>{{ dateFormat(row.loginTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="是否启用" width="100">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @click="switchStatus(row)" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template #default="{ row }">
                    <el-button text type="primary" @click="allocRoleChoice(row.id)"
                        v-permission="'allocRole'">分配角色</el-button>
                    <el-button text type="primary" @click="editUser(row.id)" v-permission="'editUser'">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div>
        <ElConfigProvider :locale="locale">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
        </ElConfigProvider>
    </div>

    <!-- 添加成员 -->
    <div>
        <EditUser :show="isShow" @Show="closeDialog" :id="editId"></EditUser>
    </div>

    <!-- 分配角色 -->
    <div>
        <AllocRole :show="opShow" :id="allocId" @OpShow="closeAllocDialog"></AllocRole>
    </div>
</template>
<script setup lang='ts'>
import { Search } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { switchUserStatusApi, userListApi } from "./api";
import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { dateFormat } from "@/utils/index";
import EditUser from './editUser.vue';
import AllocRole from './allocRole.vue'
import useTable from "@/hooks/useTable";

// 选择角色传入id
const allocId = ref(0)
const opShow = ref(false)
// 点击分配角色
const allocRoleChoice = (id: number) => {
    allocId.value = id
    opShow.value = true
}

// 分配角色页点击确认或取消
const closeAllocDialog = (val: boolean) => {
    opShow.value = false;
    allocId.value = 0
    if (val) ListFn();
}


// 编辑传入id
const editId = ref(0)
// 点击编辑
const editUser = (id: number) => {
    editId.value = id
    isShow.value = true
}


// 编辑页点击确认或取消
const closeDialog = (val: boolean) => {
    isShow.value = false;
    editId.value = 0
    if (val) ListFn();
}

// 添加角色
const isShow = ref(false)


// 分页器数据
const background = ref(false)
const locale = zhCn

// 关闭账号请求
const switchStatus = (row: List) => {
    switchUserStatusApi(row.id as number, row.status).then((res) => {
        if (res.code === 200) {
            ElMessage.success('状态修改成功')
        } else {
            row.status = row.status === 1 ? 0 : 1
        }
    }).catch(() => {
        row.status = row.status === 1 ? 0 : 1
    })
}

// 请求传入数据
// const queryParam = reactive<IUserListParams>({
//     keyword: '',
//     pageNum: 1,
//     pageSize: 10,
// })

// // 请求得到的数据
// const userList = ref<List[]>([]);
// const total = ref(0)

// // 请求函数
// function userListFn() {
//     userListApi(queryParam).then((res) => {
//         if (res.code === 200) {
//             // 权限页数据
//             userList.value = res.data.list;
//             total.value = res.data.total

//         }
//     })
// }
// userListFn();
const form = ref({
    keyword: ""
})
let { list, total, pageNum, pageSize, pageChangeHandle, pageSizeChangeHandle, ListFn } = useTable(userListApi, form.value)


// 重置
const Reset = () => {
    form.value.keyword = ""
    pageNum.value = 1
    pageSize.value = 10
    ListFn();
}
// // 重置
// const Reset = () => {
//     queryParam.keyword = ''
//     queryParam.pageNum = 1
//     queryParam.pageSize = 10
//     userListFn()
// }



</script>
<style lang="less" scoped>
.search-box {
    box-shadow: 0 0 10px 0px #ccc;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;

    .search {
        padding: 20px 0px;
        display: flex;

        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            width: 300px;
            margin-left: 40px;

            span {
                width: 125px;
                margin-right: 12px;
            }
        }
    }

    .search2 {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .left {

            span {
                line-height: 20px;
                font-size: 14px;
                align-items: center;
            }
        }


    }
}

:deep(.align-c),
:deep(.is-leaf) {
    .cell {
        text-align: center !important;
    }


}
</style>